import React, { Component } from 'react'
import axios from 'axios'
import BetterScroll from 'better-scroll'
export default class App extends Component {
    state={
        myname:"huahua",
        filmsList:[]
    }
    
  
  render() {
    console.log("render");
    return (
      <div>
        <button onClick={()=>{
            this.setState({
                myname:"bjyx"
            })
        }}>click</button>
        {this.state.myname}
        <div className='wepper' style={{height:"150px",width:"200px",overflow:"hidden",background:"pink"}}>
            <ul>
                {
                    this.state.filmsList.map(item=>
                    <li key={item.filmId}>{item.name}</li>
                )
                }
            </ul>
        </div>
      </div>
    )
  }
  componentDidMount(){
    // 请求数据
    axios.get("/test.json").then(res=>{
        console.log(res.data.data.films);
        this.setState({
            filmsList:res.data.data.films
        })
        // new BetterScroll(".wepper")       
    })
}
// 不安全，弃用了，要使用不警告加上UNSEFE_
  UNSEFE_componentWillUpdate(){
    console.log("componentWillUpdate,",this.state.myname);
}
// 更新完成
componentDidUpdate(prevProps,prevState){
    // 第一个参数：老的属性,父传子传过来的，第二个参数是：老的状态
    console.log("componentDidUpdate,",this.state.myname);
    console.log("老的属性:",prevProps);
    console.log("老的状态:",prevState);
    if(prevState.filmsList.length===0){
        new BetterScroll(".wepper")
    }

}
}
